<!DOCTYPE html>
<html>
<head>
    <title>Event Delegation Example</title>
	<style type="text/css">
	div{background:rgba(0,0,0,.2);}
	li{cursor:pointer;}
	</style>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <ul id="myLinks">
        <li id="bg1">点我变绿</li>
        <li id="bg2">点我变黄</li>
        <li id="bg3">点我变红</li>
    </ul>
    <script type="text/javascript">
    (function(){
        var list = document.getElementById("myLinks");
        
        EventUtil.addHandler(list, "click", function(event){
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
        
            switch(target.id){
                case "bg1":
                    this.style.background="green";
                    break;
        
                case "bg2":
                    this.style.background="yellow";
                    break;
        
                case "bg3":
                    this.style.background="red";
                    break;
            }
        });

    })();
    </script>
</body>
</html>
